<template>
  <div>
    <div class="candidate">
      <div class="candidate-title">候选人*</div>
      <div class="candidate-content">
        <RadioGroup v-model="candidate.button" type="button">
          <Radio label="方式一"></Radio>
          <Radio label="方式二"></Radio>
        </RadioGroup>
        <div v-show="candidate.button == '方式一'">
          <h2>未确定候选人，创建多用测试账号</h2>
          <Checkbox v-model="candidate.single">启用多用测试账号</Checkbox>
          <br />
          <InputNumber v-model="candidate.value" :disabled="!candidate.single">
          </InputNumber
          >设置多用账号允许使用次数
          <br />
          <Button
            type="primary"
            :disabled="!candidate.single"
            @click="pushCandidate"
            >确定</Button
          >
        </div>
        <div v-show="candidate.button == '方式二'">
          <h2>已确定候选人并希望通过电子邮件邀请该候选人参加测评</h2>
          <Form
            ref="formInline"
            :model="formInline"
            :rules="ruleInline"
            inline
            :label-width="80"
          >
            <FormItem label="姓名" prop="candidateName">
              <Input
                type="text"
                v-model="formInline.candidateName"
                placeholder="姓名"
              >
              </Input>
            </FormItem>
            <FormItem label="性别" prop="gender">
              <Select v-model="formInline.gender" style="width:200px">
                <Option value="1">男</Option>
                <Option value="0">女</Option>
              </Select>
            </FormItem>
            <FormItem label="邮件地址" prop="mailbox">
              <Input
                type="text"
                v-model="formInline.mailbox"
                placeholder="邮件"
              >
              </Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit('formInline')"
                >添加</Button
              >
            </FormItem>
          </Form>
          <p>
            要上传多位候选人，请使用
            <Upload
              class="operation"
              :before-upload="handleUpload"
              :headers="headerMsg"
              :on-success="handleSuccess"
              :show-upload-list="false"
              action="222"
            >
              <Button type="primary">批量上传</Button>
            </Upload>

            <Button class="operation" type="primary" @click="download"
              >下载模板</Button
            >
            <Button class="operation" type="text">需要帮助</Button>
          </p>
          <div class="candidate-list">
            <p>
              每页显示记录数:<Select
                v-model="candidateSearch.pageSize"
                style="width:100px"
              >
                <Option value="10">10</Option>
                <Option value="20">20</Option>
                <Option value="30">30</Option>
                <Option value="40">40</Option>
              </Select>
            </p>
            <div class="candidate-table">
              <div class="candidate-table-header">
                <div>姓名</div>
                <div>性别</div>
                <div>邮箱</div>
                <div>通行证</div>
                <div>操作</div>
              </div>
              <div
                class="candidate-table-item"
                v-for="item in candidateList"
                :key="item.id"
              >
                <div>{{ item.candidateName }}</div>
                <div>{{ item.gender ? '男' : '女' }}</div>
                <div>{{ item.mailbox }}</div>
                <div>{{ item.guid }}</div>
                <div>
                  <Button
                    class="operation"
                    type="primary"
                    size="small"
                    @click="editCandidate(item)"
                    >编辑</Button
                  >
                  <Button
                    class="operation"
                    type="primary"
                    size="small"
                    @click="delCandidate(item.id)"
                    >移除</Button
                  >
                </div>
              </div>
            </div>
            <p>
              显示第{{ candidateSearch.pageNum }}-{{
                candidateSearch.pageSize
              }}条，共{{ total }}条
            </p>
          </div>
        </div>
      </div>
    </div>
    <br />
    <Button
      type="primary"
      style="float:right;margin:0 10px;"
      @click="pushCandidate"
      >下一步</Button
    >
    <Button
      type="primary"
      style="float:right;margin:0 10px;"
      @click="pushCandidatePrv"
      >上一步</Button
    >
    
    <Modal v-model="modal1" title="编辑" @on-ok="handleSubmit('formInline2')">
      <Form
        ref="formInline2"
        :model="formInline2"
        :rules="ruleInline"
        inline
        :label-width="80"
      >
        <FormItem label="姓名" prop="candidateName">
          <Input
            type="text"
            v-model="formInline2.candidateName"
            placeholder="姓名"
          >
          </Input>
        </FormItem>
        <FormItem label="性别" prop="gender">
          <Select v-model="formInline2.gender" style="width:200px">
            <Option value="1">男</Option>
            <Option value="0">女</Option>
          </Select>
        </FormItem>
        <FormItem label="邮件地址" prop="mailbox">
          <Input type="text" v-model="formInline2.mailbox" placeholder="邮件">
          </Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import instance from '@/http/http'
export default {
  props: {
    candidate: {
      type: Object,
      default: () => {
        return {
          single: false,
          button: '方式二'
        }
      }
    }
  },
  data() {
    return {
      modal1: false,
      candidateList: [],
      headerMsg: {
        Authorization: localStorage.getItem('token')
      },
      model1: '',
      ruleInline: {
        candidateName: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        gender: {
          required: true,
          message: '请选择性别',
          trigger: 'blur'
        },
        mailbox: {
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }
      },
      formInline2: {},
      formInline: {
        candidateName: '',
        gender: 0,
        mailbox: '',
        itemId: sessionStorage.getItem('itemId')
      },
      candidateSearch: {
        pageSize: '10',
        pages: 0,
        pageNum: 1,
        itemId: sessionStorage.getItem('itemId')
      },
      total: 0
    }
  },
  mounted() {
    this.getCandidateList()
  },
  methods: {
    pushCandidatePrv() {
      this.$store.dispatch('changeTabName', '2')
    },
    pushCandidate() {
      this.$store.dispatch('changeTabName', '4')
    },

    upload(file) {
      let fileFormData = new FormData()
      fileFormData.append('file', file)
      fileFormData.append('file', file)

      let requestConfig = {
        headers: {
          'Content-Type': localStorage.getItem('token'),
          itemId: sessionStorage.getItem('itemId')
        }
      }
      instance
        .post('/upload/candidate', fileFormData, requestConfig)
        .then(res => {
          if (res.code == 200) {
            this.$Message.success('上传成功')
            this.getCandidateList()
          } else {
            this.$Message.error('第' + res.data[0].row + res.data[0].message)
          }
        })
    },
    handleSuccess(res) {
      if (res.code == 200) {
      } else {
        this.$Message.error('第' + res.data[0].row + res.data[0].message)
      }
    },
    handleUpload(file) {
      let Name = file.name
      let len = Name.indexOf('.')
      let type = Name.substring(len, Name.length) + ''

      if (['.xlsx', '.xls'].indexOf(type) > -1) {
        this.upload(file)
      } else {
        this.$Message.error('请上传表格文件')
      }
      return false
    },
    editCandidate(item) {
      this.formInline2 = JSON.parse(JSON.stringify(item))
      this.formInline2.gender = '' + item.gender
      this.modal1 = true
    },
    download() {
      window.location.href = 'http://47.105.186.204:70//down/candidate'
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let data = name == 'formInline' ? this.formInline : this.formInline2
          instance.post('/item/candidate/update', data).then(res => {
            this.$refs[name].resetFields()
            this.$Message.success(
              name == 'formInline' ? '添加成功' : '修改成功'
            )
            this.getCandidateList()
          })
        }
      })
    },
    delCandidate(id) {
      instance.post('/item/candidate/delete', { id: id }).then(res => {
        if (res.code == 200) {
          this.$Message.success('删除成功')
          this.getCandidateList()
        } else {
          this.$Message.error('删除失败')
        }
      })
      console.log(id)
    },
    getCandidateList() {
      instance
        .post('/item/candidate/queryPage', this.candidateSearch)
        .then(res => {
          this.candidateList = res.data.list

          this.total = res.data.total
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.candidate {
  width: 100%;
  padding-bottom: 10px;
  line-height: 40px;
  border: 1px solid #5cadff;
  .candidate-title {
    height: 45px;
    padding: 10px;
    box-sizing: border-box;
    background: #eee;
    line-height: 25px;
    color: #5cadff;
    border-bottom: 1px solid #5cadff;
  }
  .candidate-content {
    padding: 20px;
    h2 {
      font-weight: bold;
    }
    .operation {
      display: inline-block;
      margin: 0 10px;
    }
    .candidate-list {
      margin: 20px;
      box-sizing: border-box;
      padding: 10px;
      background: #eee;
      .candidate-table {
        border: 1px solid #999;
        border-right: none;
        border-top: none;
        .candidate-table-header {
          overflow: hidden;
          background: #5cadff;
          div {
            width: 20%;
            float: left;
            text-align: center;
            color: #fff;
            border-right: 1px solid #999;
            border-top: 1px solid #999;
          }
        }
        .candidate-table-item {
          overflow: hidden;
          background: #fff;
          div {
            width: 20%;
            float: left;
            text-align: center;
            border-right: 1px solid #999;
            border-top: 1px solid #999;
          }
        }
      }
    }
  }
}
</style>
